
<html lang=""><head>
    <title>组件 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../gitbook/style.css">




    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="view.html">


    <link rel="prev" href="../framework/view/component.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../">

                        <a href="../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.2" data-path="../framework/MINA.html">

                        <a href="../framework/MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.3" data-path="./">

                        <a href="./">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.4" data-path="../api/">

                        <a href="../api/">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../devtools/devtools.html">

                        <a href="../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../qa/qa.html">

                        <a href="../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>组件</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  open" data-level="1.3.1" data-path="view.html">

                        <a href="view.html">


                            视图容器

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.1.1" data-path="view.html">

                                <a href="view.html">


                                    view

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.1.2" data-path="scroll-view.html">

                                <a href="scroll-view.html">


                                    scroll-view

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.1.3" data-path="swiper.html">

                                <a href="swiper.html">


                                    swiper

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.2" data-path="icon.html">

                        <a href="icon.html">


                            基础内容

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.2.1" data-path="icon.html">

                                <a href="icon.html">


                                    icon

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.2.2" data-path="text.html">

                                <a href="text.html">


                                    text

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.2.3" data-path="progress.html">

                                <a href="progress.html">


                                    progress

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.3" data-path="button.html">

                        <a href="button.html">


                            表单组件

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.3.1" data-path="button.html">

                                <a href="button.html">


                                    button

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.2" data-path="checkbox.html">

                                <a href="checkbox.html">


                                    checkbox

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.3" data-path="form.html">

                                <a href="form.html">


                                    form

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.4" data-path="input.html">

                                <a href="input.html">


                                    input

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.5" data-path="label.html">

                                <a href="label.html">


                                    label

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.6" data-path="picker.html">

                                <a href="picker.html">


                                    picker

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.7" data-path="radio.html">

                                <a href="radio.html">


                                    radio

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.8" data-path="slider.html">

                                <a href="slider.html">


                                    slider

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.3.9" data-path="switch.html">

                                <a href="switch.html">


                                    switch

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.4" data-path="action-sheet.html">

                        <a href="action-sheet.html">


                            操作反馈

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.4.1" data-path="action-sheet.html">

                                <a href="action-sheet.html">


                                    action-sheet

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.4.2" data-path="modal.html">

                                <a href="modal.html">


                                    modal

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.4.3" data-path="toast.html">

                                <a href="toast.html">


                                    toast

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.4.4" data-path="loading.html">

                                <a href="loading.html">


                                    loading

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.5" data-path="navigator.html">

                        <a href="navigator.html">


                            导航

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.5.1" data-path="navigator.html">

                                <a href="navigator.html">


                                    navigator

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.6" data-path="audio.html">

                        <a href="audio.html">


                            媒体组件

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.6.1" data-path="audio.html">

                                <a href="audio.html">


                                    audio

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.6.2" data-path="image.html">

                                <a href="image.html">


                                    image

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.3.6.3" data-path="video.html">

                                <a href="video.html">


                                    video

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.7" data-path="map.html">

                        <a href="map.html">


                            地图

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.7.1" data-path="map.html">

                                <a href="map.html#map">


                                    map

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.3.8" data-path="canvas.html">

                        <a href="canvas.html">


                            画布

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.3.8.1" data-path="canvas.html">

                                <a href="canvas.html#canvas">


                                    canvas

                                </a>



                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--                     
                
                <div class="book-header" role="navigation">
                    
                </div>
                
                
                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h1 id="基础组件">基础组件</h1><p>MINA为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。</p><p>什么是组件：</p><ul><li>组件是视图层的基本组成单元。
                                </li>
                                    <li>组件自带一些功能与微信风格的样式。
                                    </li>
                                    <li><p>一个组件通常包括<code>开始标签</code>和<code>结束标签</code>，<code>属性</code>用来修饰这个组件，<code>内容</code>在两个标签之内。</p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">tagname</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"value"</span>&gt;</span>
  Content goes here ...
<span class="hljs-tag">&lt;/<span class="hljs-name">tagename</span>&gt;</span></code></pre>
                                        <p><strong>注意：所有组件与属性都是小写，以连字符<code>-</code>连接</strong></p></li></ul>
                                    <h3 id="属性类型">属性类型</h3><table>
                                    <thead>
                                    <tr><th>类型</th>
                                        <th>描述</th>
                                        <th>注解</th>
                                    </tr></thead><tbody>
                                <tr><td>Boolean</td>
                                    <td>布尔值</td>
                                    <td>组件写上该属性，不管该属性等于什么，其值都为<code>true</code>，只有组件上没有写该属性时，属性值才为<code>false</code>。如果属性值为变量，变量的值会被转换为Boolean类型</td>
                                </tr><tr><td>Number</td>
                                    <td>数字</td>
                                    <td><code>1</code>, <code>2.5</code></td>
                                </tr><tr><td>String</td>
                                    <td>字符串</td>
                                    <td><code>"string"</code></td>
                                </tr><tr><td>Array</td>
                                    <td>数组</td>
                                    <td><code>[ 1, "string" ]</code></td>
                                </tr><tr><td>Object</td>
                                    <td>对象</td>
                                    <td><code>{ key: value }</code></td>
                                </tr><tr><td>EventHandler</td>
                                    <td>事件处理函数名</td>
                                    <td><code>"handlerName"</code> 是<a href="../framework/app-service/page.html">Page</a>中定义的事件处理函数名</td>
                                </tr><tr><td>Any</td>
                                    <td>任意属性</td>
                                    <td></td>
                                </tr></tbody></table>

                                    <h3 id="共同属性类型">共同属性类型</h3><p>所有组件都有的属性：</p><table>
                                    <thead>
                                    <tr><th>属性名</th>
                                        <th>类型</th>
                                        <th>描述</th>
                                        <th>注解</th>
                                    </tr></thead><tbody>
                                <tr><td>id</td>
                                    <td>String</td>
                                    <td>组件的唯一标示</td>
                                    <td>保持整个页面唯一</td>
                                </tr><tr><td>class</td>
                                    <td>String</td>
                                    <td>组件的样式类</td>
                                    <td>在对应的wxss中定义的样式类</td>
                                </tr><tr><td>style</td>
                                    <td>String</td>
                                    <td>组件的内联样式</td>
                                    <td>可以动态设置的内联样式</td>
                                </tr><tr><td>hidden</td>
                                    <td>Boolean</td>
                                    <td>组件是否显示</td>
                                    <td>所有组件默认显示</td>
                                </tr><tr><td>data-*</td>
                                    <td>Any</td>
                                    <td>自定义属性</td>
                                    <td>组件上触发的事件时，会发送给事件处理函数</td>
                                </tr><tr><td>bind* / catch*</td>
                                    <td>EventHandler</td>
                                    <td>组件的事件</td>
                                    <td>详见<a href="../framework/view/wxml/event.html">事件</a></td>
                                </tr></tbody></table>

                                    <h3 id="特殊属性">特殊属性</h3><p>几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个<a href="#组件列表">组件</a>的定义。</p><h3 id="组件列表">组件列表</h3><p>基础组件分为以下八大类：</p><p><strong>视图容器(View Container)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="view.html">view</a></td>
                                    <td>视图容器</td>
                                </tr><tr><td><a href="scroll-view.html">scroll-view</a></td>
                                    <td>可滚动视图容器</td>
                                </tr><tr><td><a href="swiper.html">swiper</a></td>
                                    <td>可滑动的视图容器</td>
                                </tr></tbody></table>

                                    <p><strong>基础内容(Basic Content)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="icon.html">icon</a></td>
                                    <td>图标</td>
                                </tr><tr><td><a href="text.html">text</a></td>
                                    <td>文字</td>
                                </tr><tr><td><a href="progress.html">progress</a></td>
                                    <td>进度条</td>
                                </tr></tbody></table>

                                    <p><strong>表单(Form)：</strong></p><table>
                                    <thead>
                                    <tr><th>标签名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="button.html">button</a></td>
                                    <td>按钮</td>
                                </tr><tr><td><a href="form.html">form</a></td>
                                    <td>表单</td>
                                </tr><tr><td><a href="input.html">input</a></td>
                                    <td>输入框</td>
                                </tr><tr><td><a href="checkbox.html">checkbox</a></td>
                                    <td>单项选择器</td>
                                </tr><tr><td><a href="radio.html">radio</a></td>
                                    <td>多项选择器</td>
                                </tr><tr><td><a href="picker.html">picker</a></td>
                                    <td>列表选择器</td>
                                </tr><tr><td><a href="slider.html">slider</a></td>
                                    <td>滑动选择器</td>
                                </tr><tr><td><a href="switch.html">switch</a></td>
                                    <td>开关选择器</td>
                                </tr><tr><td><a href="label.html">label</a></td>
                                    <td>标签</td>
                                </tr></tbody></table>

                                    <p><strong>操作反馈(Interaction)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="action-sheet.html">action-sheet</a></td>
                                    <td>上拉菜单</td>
                                </tr><tr><td><a href="modal.html">modal</a></td>
                                    <td>模态弹窗</td>
                                </tr><tr><td><a href="toast.html">toast</a></td>
                                    <td>短通知</td>
                                </tr></tbody></table>

                                    <p><strong>导航(Navigation)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="navigator.html">navigator</a></td>
                                    <td>应用内跳转</td>
                                </tr></tbody></table>

                                    <p><strong>多媒体(Media)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="audio.html">audio</a></td>
                                    <td>音频</td>
                                </tr><tr><td><a href="image.html">image</a></td>
                                    <td>图片</td>
                                </tr><tr><td><a href="video.html">video</a></td>
                                    <td>视频</td>
                                </tr></tbody></table>

                                    <p><strong>地图(Map)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="map.html">map</a></td>
                                    <td>地图</td>
                                </tr></tbody></table>

                                    <p><strong>画布(Canvas)：</strong></p><table>
                                    <thead>
                                    <tr><th>组件名</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="canvas.html">canvas</a></td>
                                    <td>画布</td>
                                </tr></tbody></table>



                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="../framework/view/component.html" class="navigation navigation-prev " aria-label="Previous page: 组件">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="view.html" class="navigation navigation-next " aria-label="Next page: 视图容器">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>


    <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>


 




</div></body></html>